<template>
    <el-col :span="6">

<el-card class="box-card">
  <div ref="chart" style="height:38vh;width: 360px;"></div>
  <template #footer>Footer content</template>
</el-card>
</el-col>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts'

export default {
data() {
return {
chart:null,
data: [] // 初始化 data 变量为空数组
};
},
mounted() {
this.initChart(); // 初始化 Echarts 实例
this.fetchData();
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart);
},
fetchData() {
this.$http.get('http://localhost:8080/comment/scorecomment') // 发起后端请求获取查询结果
  .then(response => {
    this.data = response.data; // 将返回的数据赋值给 data 变量
    this.renderChart();
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });
},
renderChart() {
const options = {
  // 在这里根据需求配置 Echarts 图表的选项
  title: {
  text: '乐谱评论top',
  left: 'center'
},
  tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },

  xAxis: {
    type: 'category',
    data: this.data.map(row => row.workname.length > 5 ? row.workname.slice(0, 5) + '...' : row.workname), // 使用 this.data 进行 map 操作
    axisLabel: {
          rotate: 45 // 调整旋转角度，可以根据需要进行调整
      }
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: this.data.map(row => row.scorecount) // 使用 this.data 进行 map 操作
  }]
};
this.chart.setOption(options);
}
}
};
</script>

<style>
/* 在这里添加你的样式 */
</style>